<template>
  <div>
    <basic-dialog :visible="visible" minWidth="340px"
                  :title="`LAN${lanType}配置`">
      <q-form @submit="onSubmit"
              greedy
              @reset="$emit('close')"
              ref="myForm"
              class="dialog-content block">
        <div style="padding: 20px 20px 0 20px">
          <div v-if="lanType ==='1'" class="left">
            <div>
              <div>
                <div style="display: flex">
                  <label class="text-right name mode-type bold" style="padding-right: 6px;width: 92px">分配模式:</label>
                  <div style="margin-bottom: 20px">
                    <CustomizedSwitch v-if="visible" style="width: 110px" ref="switch" :options="modeOption" v-model="form.dhcp"/>
                  </div>
                </div>

                <q-input style="width: 266px" v-model.trim="form.ipaddr" outlined dense :disable="form.dhcp === 1"
                         :rules="[val => form.dhcp === 1 || (val && val.length > 0) || '请填写ip地址',
                       val => form.dhcp === 1 || (val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)) || '请输入合法ip地址']">
                  <template v-slot:before>
                    <label class="text-right name label-width bold"><span class="text-red" v-if="form.dhcp !== 1">*</span>IP地址:</label>
                  </template>
                </q-input>

                <q-input style="width: 266px" v-model.trim="form.netmask" outlined dense :disable="form.dhcp === 1"
                         :rules="[val => form.dhcp === 1 || (val && val.length > 0) || '请填写子网掩码',
                       val => form.dhcp === 1 || (val && /^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/.test(val)) || '请输入合法子网掩码']">
                  <template v-slot:before>
                    <label class="text-right name bold"><span class="text-red" v-if="form.dhcp !== 1">*</span>子网掩码:</label>
                  </template>
                </q-input>

                <q-input style="width: 266px" v-model.trim="form.gateway" outlined dense :disable="form.dhcp === 1"
                         :rules="[val => form.dhcp === 1 || (val && val.length > 0) || '请填写网关地址',
                       val => form.dhcp === 1 || (val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)) || '请输入合法ip地址']">
                  <template v-slot:before>
                    <label class="text-right name bold"><span class="text-red" v-if="form.dhcp !== 1">*</span>网关地址:</label>
                  </template>
                </q-input>

                <div class="title">网卡速率</div>

                <q-select
                  style="width: 266px;margin-bottom: 20px"
                  outlined
                  dense
                  emit-value
                  map-options
                  options-dense
                  :options="speedOptions"
                  :rules="[ val => val !== '' || ' 请选择网卡速率']"
                  v-model="form.speed">
                  <template v-slot:no-option>
                    <div class="no-option" />
                  </template>
                  <template v-slot:before>
                    <label class="text-right name bold"><span class="text-red">*</span>网速模式:</label>
                  </template>
                </q-select>
              </div>
            </div>
          </div>
          <div v-if="lanType === '2'" class="left">
            <div>
              <div>
                <div style="display: flex">
                  <label class="text-right name mode-type bold" style="padding-right: 6px;width: 92px">分配模式:</label>
                  <div style="margin-bottom: 20px">
                    <CustomizedSwitch v-if="visible" style="width: 110px" ref="switch" :options="modeOption" v-model="form2.dhcp"/>
                  </div>
                </div>

                <q-input style="width: 266px" v-model.trim="form2.ipaddr" outlined dense :disable="form2.dhcp === 1"
                         :rules="[val => form2.dhcp === 1 || (val && val.length > 0) || '请填写ip地址',
                       val => form2.dhcp === 1 || (val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)) || '请输入合法ip地址']">
                  <template v-slot:before>
                    <label class="text-right name label-width bold"><span class="text-red" v-if="form2.dhcp !== 1">*</span>IP地址:</label>
                  </template>
                </q-input>

                <q-input style="width: 266px" v-model.trim="form2.netmask" outlined dense :disable="form2.dhcp === 1"
                         :rules="[val => form2.dhcp === 1 || (val && val.length > 0) || '请填写子网掩码',
                       val => form2.dhcp === 1 || (val && /^(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(?:\.(?:\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/.test(val)) || '请输入合法子网掩码']">
                  <template v-slot:before>
                    <label class="text-right name bold"><span class="text-red" v-if="form2.dhcp !== 1">*</span>子网掩码:</label>
                  </template>
                </q-input>

                <q-input style="width: 266px" v-model.trim="form2.gateway" outlined dense :disable="form2.dhcp === 1"
                         :rules="[val => form2.dhcp === 1 || (val && val.length > 0) || '请填写网关地址',
                       val => form2.dhcp === 1 || (val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)) || '请输入合法ip地址']">
                  <template v-slot:before>
                    <label class="text-right name bold"><span class="text-red" v-if="form2.dhcp !== 1">*</span>网关地址:</label>
                  </template>
                </q-input>

                <div class="title">网卡速率</div>

                <q-select
                  style="width: 266px;"
                  outlined
                  dense
                  emit-value
                  map-options
                  options-dense
                  :options="speedOptions"
                  :rules="[ val => val !== '' || ' 请选择网卡速率']"
                  v-model="form2.speed">
                  <template v-slot:no-option>
                    <div class="no-option" />
                  </template>
                  <template v-slot:before>
                    <label class="text-right name bold"><span class="text-red">*</span>网速模式:</label>
                  </template>
                </q-select>
              </div>
            </div>
          </div>
        </div>
        <q-separator />
        <div class="dialog-footer text-center margin-t-10">
          <q-btn outline
                 label="取消"
                 color="primary"
                 class="q-mr-md"
                 type="reset" />
          <q-btn unelevated
                 label="确认"
                 v-throttle
                 color="primary"
                 :loading="submitting"
                 type="submit" />
        </div>
      </q-form>
    </basic-dialog>
  </div>
</template>

<script>
import BasicDialogMixin from 'src/components/common/basic-dialog/src/basic-dialog-mixin'
import CustomizedSwitch from 'src/components/customized-switch'
import { updateLan } from '../../../../boot/miot/list'
import _ from 'lodash'
export default {
  name: 'lan-config',
  mixins: [BasicDialogMixin],
  components: {
    CustomizedSwitch
  },
  props: {
    lanType: {
      type: String,
      default: ''
    },
    lanInfo: {
      type: Object,
      default: () => { }
    },
    boxId: {
      type: String,
      default: ''
    }
  },
  watch: {
    lanInfo: {
      immediate: true,
      deep: true,
      handler: function (val) {
        if (val) {
          if (val.lan0) {
            const form = val.lan0
            if (form.dhcp === 1) {
              this.form.dhcp = form.dhcp
              this.form.speed = form.speed
            } else {
              this.form = _.cloneDeep(form)
            }
            this.formTemp = _.cloneDeep(form)
          }
          if (val.lan1) {
            const form = val.lan1
            if (form.dhcp === 1) {
              this.form2.dhcp = form.dhcp
              this.form2.speed = form.speed
            } else {
              this.form2 = _.cloneDeep(form)
            }
            this.form2Temp = _.cloneDeep(form)
          }
        }
      }
    },
    'form.dhcp': {
      handler: function (val, oldVal) {
        // reset表单验证
        if (this.$refs.myForm) {
          this.$refs.myForm.resetValidation()
        }
        // 从静态切换到dhcp，保存一下静态所填写的值
        if (val === 1 && oldVal === 0) {
          this.formTemp = _.cloneDeep(this.form)
        }
        // 如果是静态模式，就把他恢复之前存的值，如果是dchp模式，就置空
        if (val === 0) {
          this.form.gateway = this.formTemp.gateway
          this.form.ipaddr = this.formTemp.ipaddr
          this.form.netmask = this.formTemp.netmask
        } else if (val === 1) {
          this.form.gateway = ''
          this.form.ipaddr = ''
          this.form.netmask = ''
        }
      }
    },
    'form2.dhcp': {
      handler: function (val, oldVal) {
        if (this.$refs.myForm) {
          this.$refs.myForm.resetValidation()
        }
        // 从静态切换到dhcp，保存一下静态所填写的值
        if (val === 1 && oldVal === 0) {
          this.form2Temp = _.cloneDeep(this.form2)
        }
        // 如果是静态模式，就把他恢复之前存的值，如果是dchp模式，就置空
        if (val === 0) {
          this.form2.gateway = this.form2Temp.gateway
          this.form2.ipaddr = this.form2Temp.ipaddr
          this.form2.netmask = this.form2Temp.netmask
        } else if (val === 1) {
          this.form2.gateway = ''
          this.form2.ipaddr = ''
          this.form2.netmask = ''
        }
      }
    }
  },
  data () {
    return {
      submitting: false,
      form: {
        dhcp: 1,
        gateway: '',
        ipaddr: '',
        netmask: '',
        speed: ''
      },
      form2: {
        dhcp: 1,
        gateway: '',
        ipaddr: '',
        netmask: '',
        speed: ''
      },
      form2Temp: {},
      formTemp: {},
      speedOptions: [
        {
          value: 0,
          label: '自动'
        },
        {
          value: 1,
          label: '10M半双工'
        },
        {
          value: 2,
          label: '10M全双工'
        },
        {
          value: 3,
          label: '100M半双工'
        },
        {
          value: 4,
          label: '100M全双工'
        }
      ],
      modeOption: [
        {
          value: 1,
          label: 'DHCP'
        },
        {
          value: 0,
          label: '静态'
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    // 提交表单
    onSubmit () {
      this.submitData()
    },
    // 保存数据
    async submitData () {
      const params = {}
      if (this.lanType === '1') {
        params.lan0 = this.form
      } else {
        params.lan1 = this.form2
      }
      this.submitting = true

      try {
        const data = await updateLan(this.boxId, params)
        if (data.data.result_code === 0) {
          this.$emit('updateLanSuccess')
        } else {
          this.$message.error('修改失败')
        }
      } catch (e) {
      }
      this.submitting = false
    }
  }
}
</script>

<style scoped lang="stylus">
  .left
    .title
      line-height 1
      font-size 16px
      margin-bottom 20px
      color $primary
</style>
